<template>
  <div v-if="user" :key="newKey" class="member-archive">
    <ElCard v-if="editUser" class="member-info">
      <ElRow class="title-color">
        <ElCol :span="7"> 基本信息（{{ user.level.level }}） </ElCol>
        <ElCol :span="7"> 建档时间：{{ user.create_time }} </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="7">
          宝宝姓名：
          <ElInput
            v-model="user.child_name"
            :value="user.child_name"
            @change="changeEditStatus"
          />
        </ElCol>
        <ElCol :span="7">
          宝宝生日：
          <ElDatePicker
            v-model="birthday"
            type="date"
            prefix-icon="dd"
            class="w120"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder=""
            @change="changeEditStatus"
          >
          </ElDatePicker>
        </ElCol>
        <ElCol :span="7">
          宝宝性别：
          <ElRadioGroup v-model="user.sex.value" @change="changeEditStatus">
            <ElRadioButton label="男" value="1"></ElRadioButton>
            <ElRadioButton label="女" value="2"></ElRadioButton>
          </ElRadioGroup>
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="7">
          家长姓名：
          <ElInput v-model="user.parent_name" @change="changeEditStatus" />
        </ElCol>
        <ElCol :span="7">
          手机号码：
          <ElInput v-model="user.parent_tel" @change="changeEditStatus" />
        </ElCol>
        <ElCol :span="7">
          客户来源：
          <ElSelect
            v-model="source_id"
            :value="user.source.source_name"
            class="member-input"
            placeholder="请选择客户来源"
            @change="changeEditStatus"
          >
            <ElOption
              v-for="s in sourceList"
              :key="s.id"
              :value="s.id"
              :label="s.source_name"
            />
          </ElSelect>
        </ElCol>
      </ElRow>
      <ElButton round plain type="primary" class="save" @click="upUserInfo"
        >保存</ElButton
      >
      <ElButton round plain type="primary" @click="cancelUpUserInfo"
        >取消</ElButton
      >
    </ElCard>
    <ElCard v-else class="member-info">
      <ElRow class="title-color">
        <ElCol :span="8"> 基本信息（{{ user.level.level }}） </ElCol>
        <ElCol :span="8"> 建档时间：{{ user.create_time }} </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="8"> 宝宝姓名： {{ user.child_name }} </ElCol>
        <ElCol :span="8"> 宝宝年龄： {{ user.age }} </ElCol>
        <ElCol :span="8"> 宝宝性别： {{ user.sex.value }} </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="8"> 家长姓名： {{ user.parent_name }} </ElCol>
        <ElCol :span="8"> 手机号码： {{ user.parent_tel }} </ElCol>
        <ElCol :span="8"> 客户来源： {{ user.source.source_name }} </ElCol>
      </ElRow>
      <ElButton round plain type="primary" @click="clickEditUser"
        >编辑</ElButton
      >
    </ElCard>
    <ElTabs class="member-archive-tabs">
      <ElTabPane label="电子病历">
        <EMR :key="newKey" :u-id="uId" />
      </ElTabPane>
      <ElTabPane label="体质体格">
        <TiZhiTiGeResult :id="uId" />
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<script>
import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
import format from 'date-fns/format';
import {http, catchAppError} from '@/util';
import url from '@/config';
import EMR from '@/components/member/EMR.vue';
import TiZhiTiGeResult from '@/components/member/TiZhiTiGeResult.vue';
import changeEditStatus from './MemberEditStatus';

export default {
  name: 'MemberArchive',
  components: {EMR, TiZhiTiGeResult},
  props: {
    uId: {
      type: Number,
      default: 0
    },
    newKey: {
      type: String,
      default: ''
    },
    leaved: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      user: null,
      editUser: false,
      sourceList: [],
      birthday: 0,
      sex: 0,
      source_id: 0
    };
  },
  watch: {
    newKey() {
      return http
        .post(url.getUserDetail, {u_id: this.uId})
        .then(res => {
          this.user = res;
        })
        .catch(catchAppError);
    },
    editUser() {
      if (this.editUser) {
        this.fetchSource();
      }
    },
    leaved() {
      if (this.leaved && this.editUser) {
        this.clearData();
      }
    }
  },
  methods: {
    changeEditStatus,
    clearData() {
      this.editUser = false;
    },
    cancelUpUserInfo() {
      changeEditStatus(false);
      this.editUser = false;
    },
    clickEditUser() {
      this.birthday = format(this.user.birthday * 1000, 'yyyy-MM-dd');
      this.source_id = this.user.source.id;
      this.editUser = true;
    },
    fetchSource() {
      http
        .get(url.getSource)
        .then(res => {
          this.sourceList = res;
        })
        .catch(catchAppError);
    },
    upUserInfo() {
      return http
        .post(url.upMember, {
          ...this.user,
          u_id: this.user.id,
          source_id: this.source_id,
          birthday: this.birthday,
          sex: this.user.sex.value === '男' ? 1 : 2
        })
        .then(() => {
          this.editUser = false;
          changeEditStatus(false);
          this.user.source = {
            id: this.source_id,
            source_name: this.sourceList.find(s => s.id === this.source_id)
              .source_name
          };
          this.user.sex = {
            id: this.user.sex.value === '男' ? 1 : 2,
            value: this.user.sex.value
          };
          this.user.age = this.getAge();
        })
        .catch(catchAppError);
    },
    getAge() {
      const months = differenceInCalendarMonths(
        Date.now(),
        new Date(this.birthday)
      );
      const years = Math.floor(months / 12);
      const month = months % 12;
      if (!months) {
        return `${differenceInCalendarDays(
          Date.now(),
          new Date(this.birthday)
        )}天`;
      }
      return `${years ? `${years}岁` : ''}${month ? `${month}个月` : ''}`;
    }
  }
};
</script>

<style lang="scss">
.member-archive {
  @import '@/assets/css/tab.scss';
  font-size: 16px;
  .member-info {
    position: relative;
    .el-row {
      margin-bottom: 30px;
      &.title-color {
        color: #4b90ff;
        font-size: 16px;
        font-weight: bold;
      }
    }
    padding: 30px 30px 0;
    .el-button {
      position: absolute;
      right: 40px;
      bottom: 50px;
      &.save {
        right: 130px;
      }
    }
    .el-input {
      width: 130px;
    }
    .el-input--prefix .el-input__inner {
      padding-left: 15px;
    }
    .el-radio-button {
      margin-right: 25px;
      .el-radio-button__inner {
        border-left: 1px solid #4b90ff;
        border: 1px solid #4b90ff;
        color: #4b90ff;
        border-radius: 20px;
        padding: 8px 20px;
        font-size: 12px;
      }
      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: #ffb03e;
        border-left: 1px solid #ffb03e;
        border: 1px solid #ffb03e;
        box-shadow: -1px 0 0 0 #ffb03e;
        color: #fff;
      }
    }
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    display: block;
  }
  .content.el-card {
    background-color: transparent;
    .el-card__body {
      padding: 0;
    }
  }
  .member-archive-tabs {
    .el-tabs__item {
      font-size: 16px;
      font-weight: bold;
    }
    thead {
      font-size: 16px;
    }
  }
}
</style>
